<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>state简写方式</title>
</head>

<body>
    <!-- 准备好一个“容器” -->
    <div id="test"></div>

    <!-- 引入react核心库 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- 引入react-dom，用于支持react操作DOM -->
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <!-- 引入babel，用于将jsx转为js -->
    <script type="text/javascript" src="../js/babel.min.js"></script>


    <script type="text/babel">
        class Lss extends React.Component {
            ref1 = React.createRef()
            ref2 = React.createRef()
            showOne = () => {
                console.log('ref1', this);
                console.log('ref1', this.ref1.current.value);
            }
            showTwo = () => {
                console.log('ref2', this);
            }
            showThree = (e) => {
                console.log('默认传递过来事件对象', e);
                console.log('默认传递过来事件对象', e.target.value);
            }
            render() { // render用来渲染一个虚拟DON
                return (
                    <div>
                        <input ref={this.ref1} placeholder="请输入" />&nbsp;
                        <button onClick={this.showOne}>点击弹出左侧值</button> &nbsp;
                        <input onBlur={this.showTwo} ref={this.ref2} placeholder="请输入" />&nbsp;
                        {/*不使用ref的写法*/}
                        <input onBlur={this.showThree} placeholder="请输入" />
                    </div>
                )
            }
        }

        ReactDOM.render(<Lss />, document.querySelector('#test'))

        /**
         * 这种创建一个ref对象的方式只能一次创建一个ref，如果多的话，就要写很多的React.createRef()
         * 但是这种方式却是官方最推荐的写法
         *
         * 在实际开发中，我们却是推荐写成内联回调函数的方式
         * */

    </script>
</body>

</html>